<script setup>
import {ref, computed} from "vue";
import {post} from "@/request/request";
import {onLoad, onShow} from "@dcloudio/uni-app";

const goodsId = ref("");
const goodsNumber = ref(1);
const goodsInfo = ref({});

onLoad((options) => {
  goodsId.value = options.id;
});

onShow(() => {
  goodsItem();
});

const goodsItem = () => {
  post("productDetail", {product_id: goodsId.value}).then((res) => {
    const {data} = res;
    console.log('data', data);
    goodsInfo.value = data;
  });
};

const backClick = () => {
  uni.navigateBack();
};

const totalPrice = computed(() => {
  return (goodsNumber.value * goodsInfo.value.product_price).toFixed(2);
});

const numberChange = (e) => {
  console.log("当前值为: " + e.value);
};

const goodsPay = () => {
  const {value: id} = goodsId;
  const {value: number} = goodsNumber;
  const {value: totalPriceValue} = totalPrice;
  uni.setStorageSync('goods', {id, number, totalPrice: totalPriceValue});
  uni.navigateTo({url: '/pages/address/address'});
};

//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "ئەڭ ئىسىل مەھسۇلات بىزدە",
    path: "/pages/home/home",
  };
};

</script>
<template>
  <uv-navbar :fixed="true" :placeholder="true" @leftClick="backClick">
    <template v-slot:left>
      <view class="uv-nav-slot" @click="open">
        <image src="/static/search/arrow-left.svg"/>
      </view>
    </template>
  </uv-navbar>
  <view class="goods">
    <view class="swiper">
      <uv-swiper :list="goodsInfo.product_banner_images" height="688rpx" :circular="true"></uv-swiper>
    </view>
    <view class="goods-name">{{ goodsInfo.product_name }}</view>
    <view class="goods-num-box">
      <view class="goods-num">
        <view class="number">
          <uv-number-box v-model="goodsNumber">
            <template v-slot:plus>
              <view class="plus">
                <text>+</text>
              </view>
            </template>
            <template v-slot:input>
              <text style="width: 50px; text-align: center" class="input">
                {{ goodsNumber }}
              </text>
            </template>
            <template v-slot:minus>
              <view class="minus">
                <text>-</text>
              </view>
            </template>
          </uv-number-box>
        </view>
        <view class="money">{{ goodsInfo.product_price }}￥</view>
      </view>
    </view>
    <rich-text :nodes="goodsInfo.product_description" class="item-detailed"/>
    <view class="bottom">
      <view class="button" @click="goodsPay">立即购买</view>
      <view class="add-money">
        <view class="item-add">{{ goodsNumber }}（تال）</view>
        <view class="add">{{ totalPrice }}￥</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 1rpx;
  border-radius: 200rpx;
  border-color: #dadbde;
  padding: 6rpx 14rpx;
  opacity: 0.8;

  image {
    height: 28rpx;
    width: 22rpx;
  }
}

.goods {
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20rpx;
  padding-bottom: 150rpx;
  font-family: my-font;

  .swiper {
    width: 726rpx;
    height: 688rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .goods-name {
    margin: 20rpx;
    width: 100%;
    color: #111111;
    font-size: 36rpx;
    font-weight: 400;
  }

  .goods-num-box {
    width: 100%;
    display: flex;
    align-items: center;

    .goods-num {
      width: 188px;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .number {
        margin: 20rpx;
        height: 38rpx;

        .minus {
          width: 44rpx;
          height: 44rpx;
          border-width: 1px;
          border-color: #e6e6e6;
          border-style: solid;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          /* #ifndef APP-NVUE */
          display: flex;
          /* #endif */
          justify-content: center;
          align-items: center;

          text {
            //width: 44rpx;
            //height: 44rpx;
            color: #FF8473;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .input {
          padding: 0 10px;
        }

        .plus {
          width: 44rpx;
          height: 44rpx;
          background-color: #ff8473;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          /* #ifndef APP-NVUE */
          display: flex;
          /* #endif */
          justify-content: center;
          align-items: center;

          text {
            color: #ffffff;
          }
        }
      }

      .money {
        width: 366rpx;
        height: 38rpx;
        color: #ff9385;
        font-size: 40rpx;
      }
    }
  }

  .item-detailed {
    margin: 48rpx;
    width: 686rpx;
    padding: 20rpx;
    background: #fff8ee;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: #ffffff;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
    z-index: 999;

    .button {
      width: 430rpx;
      height: 84rpx;
      background: #43A833;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20rpx;
    }

    .add-money {
      width: 238rpx;
      height: 38rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .item-add {
        font-size: 20rpx;
        color: #111111;
      }

      .add {
        font-size: 40rpx;
        color: #111111;
      }
    }
  }
}
</style>
